<template>
    <div>
        <!-- 进出站管理-安检登记 -->
        <div class="top-container">
            <div class="container">
                <div class="content">
                    <div class="block">
                        <span class="demonstration lf" style="line-height: 35px;padding-right: 10px;">操作时间</span>
                        <el-date-picker style="width: 20%;float: left" format="yyyy 年 MM 月 dd 日 HH时 mm分 ss秒"  v-model="date" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker><!-- format="yyyy 年 MM 月 dd 日 HH时 mm分 ss秒"  -->
                    </div>
                    <!--<avue-form ref="form" style="width: 60%" v-model="date" :option="operateTime" class="yz-form lf"></avue-form>-->
                    <el-form ref="form" label-width="80px">
                        <el-col :span="4">
                            <el-form-item label="车牌号" label-width="80px">
                                <el-autocomplete v-model="cardCodeTips" placeholder="" size="mini" :fetch-suggestions="querySearchCode"></el-autocomplete>
                            </el-form-item>
                        </el-col>
                    </el-form>
                    <el-tabs v-model="activeName" style="margin-top: 0;">
                        <el-form ref="form" style="margin-left: 30px">
                            <el-form-item label="安检结果" class="lf" label-width="70px">
                                <el-select v-model="qualified" style='width: 130px;' placeholder="">
                                    <el-option :label="item.label" :key="item.value" v-for='item  in options' :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <button class="check-btn rf" @click="cancelBtn">
                            <img src="../../assets/imgs/operation_btn_icon_quxiao_default.png" alt="" class="btn-img">
                            作废</button>
                        <button class="check-btn rf" @click="searchBusList"><!-- " -->
                            <img src="../../assets/imgs/operation_btn_icon_chaxun_default.png" alt="" class="btn-img">
                            查询</button>
                    </el-tabs>
                </div>
                <div  style="border-bottom: 1px solid #eee; height: 1px;width: 100%" class="lf"></div>
                <el-row style="width: 100%" class="lf">
                    <el-col :span="24">
                        <avue-crud @current-change="rowChange" @current-row-change="handleCurrentRowChange" :data='objs' v-model="bearFruit" :page="page" :option="dataForm"></avue-crud>
                    </el-col>
                </el-row>
            </div>
        </div>

        <!--删除弹窗 S-->
        <div class="deleteModal" v-if="showModal">
            <div class="deleteModal-box">
                <div class="delete-title"><i></i><span>是否确认作废车牌号【{{this.vehinos}}】,于【{{this.sc_times}}】登记的安检记录</span></div>
                <button class="sure-btn rf"  @click="deleteClass">确定</button>
                <button class="cancel-btn rf"  @click="cancelModal">取消</button>
            </div>
        </div>
        <!--删除弹窗 E-->
    </div>

</template>

<script>
    import "../../assets/js/jquery.js";
    // import TableData from "../../components/common/tableData";
    // import qs from "qs";


    export default {
        data: function(){
            return {
                date:[],
                tureOrF:'',
                vehinos:'',
                sc_times:'',
                showModal:false,
                objs:[],//用来显示数据的数组
                currentRow:"",//点击的是当前的第几行
                restaurants:[],
                tagses:[],
                activeName: '',
                options: [
                    {
                        value: '',
                        label: '不限'
                    },
                    {
                        value: '1',
                        label: '合格'
                    },
                    {
                        value: '0',
                        label: '不合格'
                    },
                ],
                qualified: "",
                cardCodeTips: "",
                page: {
                    pageSizes: [10],//分页信息 pageSize
                    total: 20,//总页数 totalRow
                    currentPage: 1,//当前第几页 pageNumber
                    pageSize: 10,//每一页加载多少条数据
                },
                carData:{},
                bearFruit:{},//最后写入push返回的数据
                operateTime:{
                    labelWidth:70,
                    column:[
                        {
                            label: "操作时间",
                            prop: "daterange",
                            type: "daterange",
                            startPlaceholder: '324',
                            endPlaceholder: '4324b',
                        },
                    ]
                },
                dataForm:{
                    page:true,
                    highlightCurrentRow:true,
                    align:'center',
                    addBtn:false,//是否添加按钮
                    delBtn:false,//是否添加删除按钮
                    editBtn:false,//是否添加编辑按钮
                    menu:false,//是否添加菜单按钮
                    column:[
                        {
                            label:'车牌号',
                            prop:'vehino',
                        },
                        {
                            label:'安检单号',
                            prop:'anjianno',
                        },
                        {
                            label:'',
                            prop:'del_flag',
                        },
                        {
                            label:'安检结果',
                            prop:'is_pass'
                        },
                        {
                            label:'安检时间',
                            prop:'sc_time',
                        },
                        {
                            sortable:true,
                            label:'登记时间',
                            prop:'create_time',
                        },
                        {
                            label:'安检员',
                            prop:'create_name',
                        },
                        {
                            label:'外观',
                            prop:'surface',
                            children:[
                                {
                                    label:'发动机、水箱',
                                    prop:'engine'
                                },
                                {
                                    label:'车身外观',
                                    prop:'cardSur',
                                },
                                {
                                    label:'车内环境',
                                    prop:'cardEnvironment'
                                },
                                {
                                    label:'视镜',
                                    prop:'levelGlass'
                                },{
                                    label:'刮水器',
                                    prop:'wiper'
                                },
                            ]
                        },
                        {
                            label:'制动系统',
                            prop:'brakeAssembly',
                            children:[
                                {
                                    label:'空气压缩机传动带',
                                    prop:'airCompressor'
                                },
                                {
                                    label:'气压表工作状况',
                                    prop:'baromete'
                                },
                                {
                                    label:'制动管路密封性',
                                    prop:'brakePipe'
                                },
                                {
                                    label:'制动系统自检',
                                    prop:'selfTestes',
                                }
                            ]
                        },
                        {
                            label:'转向系统',
                            prop:'steereSystem',
                            children:[
                                {
                                    label:'转向机构及连接',
                                    prop:'steereConnection'
                                }
                            ]
                        },
                        {
                            label:'传动系统',
                            prop:'driveSystem',
                            children:[
                                {
                                    label:'传动机构及连接',
                                    prop:'transmission'
                                },
                                {
                                    label:'自动变速液力缓速器密封性',
                                    prop:'automaticRetarde'
                                }
                            ]
                        },
                        {
                            label:'照明、信号指示灯',
                            prop:'lighting',
                            children:[
                                {
                                    label:'前照灯',
                                    prop:'headlamp'
                                },
                                {
                                    label:'信号指示灯',
                                    prop:'signalLamp'
                                }
                            ]
                        },
                        {
                            label:'轮胎',
                            prop:'tyre',
                            children:[
                                {
                                    label:'轮胎外观',
                                    prop:'tyreAppearance'
                                },
                                {
                                    label:'轮胎花纹深度',
                                    prop:'tyreDepth'
                                },
                                {
                                    label:'轮胎规格和花纹',
                                    prop:'tyreSpecifications'
                                },
                                {
                                    label:'轮胎气压',
                                    prop:'tirepressure'
                                },
                                {
                                    label:'轮胎爆栓、螺母',
                                    prop:'tyrebolt'
                                }
                            ]
                        },
                        {
                            label:'悬架系统',
                            prop:'suspensionSystem',
                            children:[
                                {
                                    label:'弹性元件',
                                    prop:'elasticCell'
                                },
                                {
                                    label:'U型螺栓螺母',
                                    prop:'typeBolt'
                                },
                                {
                                    label:'吊耳销（套）、锁销',
                                    prop:'lugPin'
                                }
                            ]
                        },
                        {
                            label:'安全措施',
                            prop:'safetyPrecautions',
                            children:[
                                {
                                    label:'车门应急开关',
                                    prop:'doorSwitch'
                                },
                                {
                                    label:'安全顶窗',
                                    prop:'safeWindow'
                                },
                                {
                                    label:'安全锤',
                                    prop:'safetyHamme'
                                },
                                {
                                    label:'灭火器',
                                    prop:'fireExtinguishe'
                                }
                            ]
                        },
                        {
                            label:'摄像头',
                            prop:'camera',
                            children:[
                                {
                                    label:'摄像头的拍摄方向',
                                    prop:'cameraDirection'
                                }
                            ]
                        },
                        {
                            label:'全球卫星定位汽车行驶记录仪',
                            prop:'globalRecorde',
                            children:[
                                {
                                    label:'终端状态完好，显示正常',
                                    prop:'goodCondition'
                                }
                            ]
                        },
                        {
                            label:'安检员1',
                            prop:'sc_oper_name_1',
                        },
                        {
                            label:'安检员2',
                            prop:'sc_oper_name_2',
                        },
                        {
                            label:'备注',
                            prop:'remarks',
                        },
                    ]
                }
            }
        },
        methods:{
            //点击查询
            searchBusList(){
                var self = this;
                if(self.date == ''){
                    this.$message.error('请选择操作时间');
                }else{
                    this.postRequest("/securitycheck/vehi/list",
                        {
                            filterRules: JSON.stringify([ //that.checkDate == "" ? that.dateToString(new Date) : that.dateToString(that.checkDate)
                                {"field":"sc_vehi_security_check_log.create_time",
                                    "op":"dge","value":this.dateFun(self.date[0])
                                },
                                {"field":"sc_vehi_security_check_log.create_time",
                                    "op":"dle","value":this.dateFun(self.date[1])
                                },
                                {"field":"sc_vehi_security_check_log.vehino","op":"eq","value":this.cardCodeTips},
                                {"field":"sc_vehi_security_check_log.is_pass","op":"eq","value":this.qualified}
                            ]),order: 'desc',page: this.page.currentPage,rows: '10'
                        },
                    ).then(target => {
                        console.log(target);
                        var tag = target.data.list;
                        //页码大小
                        this.page.pageSize = target.data.pageSize;
                        //页码数
                        this.page.pageNumber = target.data.pageNumber;
                        //总页数
                        this.page.total = target.data.totalRow;
                        this.objs = [];
                        let tagses = [];
                        if(tag !== ''){
                            for(var i=0;i<tag.length;i++){
                                //拼接数据显示的数据结构
                                // console.log("*************");
                                // console.log(tag[i].is_pass);
                                // console.log("*************");

                                let cols = 'engine,cardSur,cardEnvironment,levelGlass,wiper,airCompressor,baromete,brakePipe,steereConnection,transmission,automaticRetarde,headlamp,signalLamp,tyreAppearance,tyreDepth,tyreSpecifications,selfTestes,tirepressure,tyrebolt,elasticCell,typeBolt,lugPin,doorSwitch,safeWindow,safetyHamme,fireExtinguishe,cameraDirection,goodCondition'.split(',');
                                tag.forEach(item=>{
                                    let vals = item.check_items;
                                    console.log(item.is_pass);
                                    if(item.is_pass){item.is_pass = '合格'}else{item.is_pass = '不合格'}
                                    if(item.del_flag || !item.del_flag){item.del_flag = '作废'}else{item.is_pass = ''}
                                    let colObj = {};
                                    cols.forEach((e, idx) => {
                                        colObj[e] = vals.charAt(idx) !== '0' ? '√' : '×'
                                    });

                                    item = Object.assign(item, colObj);
                                    tagses = item;

                                });

                                this.objs = target.data.list;
                                // console.log(this.objs);

                            }
                        }

                    });
                }
            },
            dateFun(val){
                var year = val.getFullYear();
                var month =(val.getMonth() + 1).toString();
                var day = (val.getDate()).toString();
                var hour = val.getHours();
                var minute = val.getMinutes();
                var second = val.getSeconds();
                if (month.length == 1) {
                    month = "0" + month;
                }
                if (day.length == 1) {
                    day = "0" + day;
                }

                var dateTimes = year + "-" + month + "-" + day + " "+ hour+ ":" + minute + ":" + second;
                return dateTimes;
            },
            // 默认加载列表
            loadList(){
                var self = this;
                this.postRequest("/securitycheck/vehi/list",{
                     /*测试数据 */     filterRules: JSON.stringify([
                           {"field":"sc_vehi_security_check_log.create_time",
                               "op":"dge","value":self.date[0] == undefined || self.date[0] == ''?self.dateToString(new Date) : self.dateToString(self.date[0])
                           },
                           {"field":"sc_vehi_security_check_log.create_time",
                               "op":"dle","value":self.date[1] == undefined || self.date[1] == ''?self.dateToString(new Date) : self.dateToString(self.date[1])
                           }
                       ]),page: this.page.currentPage,rows: '10'
                   /* 测试数据 filterRules:JSON.stringify([{"field":"sc_vehi_security_check_log.create_time","op":"dge","value":"2018-08-01 00:00:00"},
                       {"field":"sc_vehi_security_check_log.create_time","op":"dle","value":"2018-10-09 23:59:59"}]),page: this.page.currentPage,rows: '10'*/
                   },
                )
                    .then(target => {
                        console.log(target);
                        var tag = target.data.list;
                        //页码大小
                        this.page.pageSize = target.data.pageSize;
                        //页码数
                        this.page.pageNumber = target.data.pageNumber;
                        //总页数
                        this.page.total = target.data.totalRow;
                        this.objs = [];
                        if(tag !== ''){
                            for(var i=0;i<tag.length;i++){
                                //拼接数据显示的数据结构
                                // console.log("*************");
                                // console.log(tag[i].is_pass);
                                // console.log("*************");

                                let cols = 'engine,cardSur,cardEnvironment,levelGlass,wiper,airCompressor,baromete,brakePipe,steereConnection,transmission,automaticRetarde,headlamp,signalLamp,tyreAppearance,tyreDepth,tyreSpecifications,selfTestes,tirepressure,tyrebolt,elasticCell,typeBolt,lugPin,doorSwitch,safeWindow,safetyHamme,fireExtinguishe,cameraDirection,goodCondition'.split(',');
                                tag.forEach(item=>{
                                    let vals = item.check_items;
                                    // console.log(item.is_pass);

                                    if(item.is_pass){item.is_pass = '合格'}else{item.is_pass = '不合格'}
                                    if(item.del_flag || !item.del_flag){item.del_flag = '作废'}else{item.is_pass = ''}
                                    // console.log(item);
                                    let colObj = {};
                                    cols.forEach((e, idx) => {
                                        colObj[e] = vals.charAt(idx) !== '0' ? '√' : '×'
                                    });

                                    item = Object.assign(item, colObj);
                                    this.tagses = item;

                                });


                                this.objs = target.data.list;
                                // console.log(this.objs);

                            }
                        }
                    });
            },
            //获取焦点车牌号自动下拉提示
            querySearchCode(queryString, cb) {
                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                return (restaurant) => {
                    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            loadAll() {
                return [ ];
            },
            cancelBtn(){//点击作废按钮
                this.showModal = true;
            },
            cancelModal(){//点击弹窗取消按钮
                this.showModal = false;
            },
            handleCurrentRowChange(val){
                // console.log(val);
                // console.log(val.id);
                this.currentRow = val.id;
                this.vehinos = val.vehino;//传给弹窗的车牌号
                this.sc_times = val.sc_time;//传给弹窗的安检时间
            },
            deleteClass() {//点击弹窗的确定按钮
                // console.log(this.currentRow);
                // console.log(this.tagses.del_flag);
                this.postRequest("/securitycheck/vehi/del?id="+this.currentRow)
                    .then(data => {
                        // console.log(data);
                        if (data.data[0] == -1) {
                            this.$message.error(data.data[1]);
                        } else {
                            this.$message({
                                message: data.data[1],
                                type: "success",
                            });
                            this.showModal = false;

                            this.loadList();//删除成功后再次刷新列表
                        }
                    });
            },
            searchCode(){
                this.postRequest("/sch/data/bus_vehicle/listWithSpell")
                    .then(target => {
                        // console.log(target.data);
                        var tag = target.data;
                        for(var i=0;i<tag.length;i++){
                            // console.log(tag[i].vehi_no);
                            // console.log(this.loadAll.value);
                            this.restaurants.push({"value":tag[i].vehi_no});
                        }
                    });
            },
            rowChange(val){
                console.log(val);
                this.page.currentPage = val;
                this.loadList();
            },

        },
        computed:{},
        watch:{
            qualified(){
                console.log(this.qualified);
            }
        },
        mounted() {
            // this.searchBusList();
            this.loadList();
            this.$emit("sendActive","4-2");
            this.searchCode();
            this.restaurants = this.loadAll();
            // this.$emit("sendTag",2);
        }
    }
</script>
<style scoped src="../../assets/css/inoutManage/safeSearch.css">
</style>
<style>
    .container .content .el-tabs__header{
        margin: 3px 0 0 0 !important;
    }
</style>
